<template>
  <div class="main-container">
    <div class="main-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>管理员用户管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="wrap">
      <div class="content">
        <div class="search-container">
          <el-form class="search-form" :model="form" ref="form" label-width="90px" label-position="right" inline>
            <el-row>
              <el-form-item label="用户名" prop="userName">
                <el-input v-model="form.userName"></el-input>
              </el-form-item>
              <el-form-item label="姓名" prop="realName">
                <el-input v-model="form.realName"></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="phoneNumber">
                <el-input v-model="form.phoneNumber"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email" v-if="showTotal">
                <el-input v-model="form.email"></el-input>
              </el-form-item>
              <el-form-item label="性别" prop="sex" v-if="showTotal">
                <el-select v-model="form.sex">
                  <el-option value="0" label="男"></el-option>
                  <el-option value="1" label="女"></el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row style="margin-left:30px">
              <el-form-item>
                <el-button type="primary" @click="onSearch">查询</el-button>
                <el-button @click="onReset">重置</el-button>
                <el-button @click="showTotal=!showTotal" type="text">{{showTotal ? '收起' : '展开'}}<i class="el-icon--right" :class="{'el-icon-arrow-down':!showTotal,'el-icon-arrow-up':showTotal}"></i></el-button>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
        <div class="mt-20">
          <el-button type="primary" @click="onAdd"><i class="el-icon-plus"></i> 新增管理员</el-button>
        </div>
        <div class="mt-10">
          <el-table :data="data" v-loading="loading">
            <!-- <el-table-column type="selection" width="55" fixed>
            </el-table-column> -->
            <el-table-column prop="userName" label="用户名" min-width="120" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="realName" label="姓名" min-width="120" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="phoneNumber" label="手机号" min-width="120" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="email" label="邮箱" min-width="120" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="sex" label="性别" min-width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.sex==0">男</span>
                <span v-if="scope.row.sex==1">女</span>
              </template>
            </el-table-column>
            <el-table-column label="操作"  width="120" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" @click="doEdit(scope.row)">修改</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="mt-10 t-right" v-if="total > 0">
          <el-pagination
            background
            :current-page="currentPage"
            :total="total"
            :page-sizes="[10, 20, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            >
          </el-pagination>
        </div>
      </div>
    </div>
    <edit-model v-if="editVisible" :visible.sync="editVisible" :data="editData" @change="changeEdit"></edit-model>
  </div>
</template>

<script>
import EditModel from './edit'
  export default {
    components: {
      EditModel: EditModel
    },
    data () {
      return {
        currentPage: 1,
        pageSize: 10,
        form: {},
        data: [],
        showTotal: false,
        total: 0,
        loading: false,
        editVisible: false,
        editData: {}
      }
    },
    activated() {
      this.loadData()
    },
    created() {
      this.loadData()
    },
    watch: {
      $route () {
        this.currentPage = 1
        this.loadData()
      }
    },
    methods: {
      loadData() {
        this.loading = true
        const params ={
          ...this.form,
          currentPage: this.currentPage,
          pageSize: this.pageSize,
        }
        this.$api.administrators.getList(params).then(res => {
          if(res.success){
            this.data = res.data.list
            this.total = res.data.total
            this.loading = false
          } else {
            this.loading = false
          }
        }).catch(err => {
          this.loading = false
        })
      },
      onSearch() {
        this.currentPage = 1
        this.loadData()
      },
      onReset() {
        this.$refs.form.resetFields()
        this.currentPage = 1
        this.loadData()
      },
      onAdd() {
        this.$router.push('/administrators/add')
      },
      changeEdit() {
        this.loadData()
        this.editVisible = false
      },
      // 修改
      doEdit(data) {
        this.editData = data;
        this.editVisible = true
      },
      // 删除
      doDelete(id) {
        this.$confirm('删除后不可还原，确认删除吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this.$api.administrators.delete(id).then(res => {
            if(res.success) {
              this.$message.success('已删除')
              this.currentPage = 1
              this.loadData()
            }
          })
        })
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.currentPage = 1
        this.loadData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.loadData()
      }
    }
  }
</script>

<style>

 
</style>
